<template>
    <div class="navBar">
        <!-- 标题 -->
        <div style="display: flex;flex-direction: row;justify-content: center;">
            <img src="img/loginIcon.png"style="width: 40px;">
            <span style="font-size: 24px;">校务管理</span>
        </div>
        <!-- 总览 -->
        <div>
            <button class="nav_bar_btn" data-value="total_vision">
                <img src="icon/total_vision_off.png" alt="">
                <span>总览</span>
            </button>
        </div>
        <!-- 信息管理 -->
        <div>
            <button class="nav_bar_btn" data-value="imformation">
                <img src="icon/imformation_off.png" alt="">
                <span>信息管理</span>
            </button>
        </div>
        <!-- 组织管理 -->
        <div>
            <button class="nav_bar_btn" data-value="orgnization">
                <img src="icon/orgnization_off.png" alt="">
                <span>组织管理</span>
            </button>
        </div>
        <div class="org_fade" id="orgnization">
            <button class="nav_bar_btn" data-value="administration">
                <li>行政组织</li>
            </button>
            <button class="nav_bar_btn" data-value="teaching">
                <li>教学组织</li>
            </button>
        </div>
        <!-- 班级管理 -->
        <div>
            <button class="nav_bar_btn" data-value="class">
                <img src="icon/class_off.png" alt="">
                <span>班级管理</span>
            </button>
        </div>
        <!-- 人员管理 -->
        <div>
            <button class="nav_bar_btn" data-value="person">
                <img src="icon/person_off.png" alt="">
                <span>人员管理</span>
            </button>
        </div>
        <div class="org_fade" id="person">
            <button class="nav_bar_btn" data-value="student">
                <li>学生管理</li>
            </button>
            <button class="nav_bar_btn" data-value="teacher">
                <li>老师管理</li>
            </button>
            <button class="nav_bar_btn" data-value="parent">
                <li>家长管理</li>
            </button>
        </div>
        <!-- 学期管理 -->
        <div>
            <button class="nav_bar_btn" data-value="term">
                <img src="icon/term_off.png" alt="">
                <span>学期管理</span>
            </button>
        </div>
        <div class="org_fade" id="term">
        </div>
        <!-- 教室管理 -->
        <div>
            <button class="nav_bar_btn" data-value="room">
                <img src="icon/room_off.png" alt="">
                <span>教室管理</span>
            </button>
        </div>
        <!-- 资源管理 -->
        <div>
            <button class="nav_bar_btn" data-value="resource">
                <img src="icon/resource_off.png" alt="">
                <span>资源管理</span>
            </button>
        </div>
    </div>
</template>
